<template>
  <div id="articleUpload">
    <el-form :model="articleData" :rules="fromRules" ref="form">
      <el-form-item prop="theme">
        <div>
          主题
          <el-input type="input" v-model="articleData.theme" clearable placeholder="请输入文章主题"></el-input>
        </div>
      </el-form-item>
      <el-form-item prop="introduction">
        <div>
          文章简介
          <el-input type="textarea" v-model="articleData.introduction" autosize placeholder="请输入文章简介内容"></el-input>
        </div>
      </el-form-item>
      <el-form-item prop="type">
        <div>
          文章类型
          <div class="typeBar">
            <p>1.选择已有的文章类型</p>
            <el-select v-model="articleData.type">
              <el-option v-for="(item, index) in typeData" :key="index" :value="item.name" :label="item.name"></el-option>
            </el-select>
            <p>2.创建新的文章类型</p>
            <el-input type="input" v-model="articleData.type" placeholder="请输入文章类型" clearable></el-input>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <div>
          选择文章文件
          <el-upload drag action="" :http-request="filesRequest" :limit="1" :multiple="false" ref="uploadFile"
            :auto-upload="false" :on-exceed="fileExceed" :file-list="fileList" accept=".md, .txt">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传md/txt文件</div>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
    <el-button @click="submit" type="success">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleData: {
        theme: '', // 文章主题
        introduction: '', // 文章简介
        type: '', // 文章类型
      }, // 输入的文章内容
      typeData: [], // 文章类型数据
      fileList: [], // 文件上传list
      fromRules: {
        theme: [
          { required: true, message: '请输入文章主题', trigger: 'blur' },
        ],
        introduction: [
          { required: true, message: '请输入文章简介', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请输入文章类型', trigger: 'blur' },
          { required: true, message: '请输入文章类型', trigger: 'change' },
        ],
      }, // 表单规则
    }
  },
  methods: {
    // 获取文章类型数据
    getArticleData() {
      this.$axios({
        method: 'post',
        url: '/type/login/getAllTypeOnce'
      }).then(res => {
        this.typeData = res.data
      })
    },
    // 上传按钮点击事件
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 调用el-upload的提交方法
          this.$refs.uploadFile.submit();
        } else {
          this.$message({
            message: '请完善文章内容再上传',
            type: 'error',
            showClose: true
          })
        }
      })
    },
    // http-request文件上传回调
    filesRequest(param) {
      // 检查文件类型
      if (this.getfileName(param.file.name) != '.md' && this.getfileName(param.file.name) != '.txt') {
        this.$message({
          message: '请选择文件格式为md或txt的文件上传',
          type: 'error',
          showClose: true,
        })
        return
      }
      // 准备数据，发送请求...
      let data = new FormData()
      data.append('file', param.file)
      data.append('type', this.articleData.type)
      data.append('introduction', this.articleData.introduction)
      data.append('theme', this.articleData.theme)
      this.$axios({
        method: 'post',
        url: '/article/login/uploadArticle',
        data: data,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        if (res.data) {
          this.$message({
            showClose: true,
            message: '提交成功',
            type: 'success',
          })
        } else {
          this.$message({
            showClose: true,
            message: '提交失败，出现错误了X.X',
            type: 'error',
          })
        }
      })
    },
    // 文件数超过事件
    fileExceed() {
      this.$message({
        showClose: true,
        type: 'error',
        message: '只能上传一个文件哦~',
      })
    },
    // 获取文件后缀工具函数
    getfileName(filename) {
      // 转换为小写
      const pos = filename.toLowerCase().lastIndexOf('.')
      let suffix = ''
      if (pos !== -1) {
        suffix = filename.substring(pos)
      }
      return suffix
    }
  },
  mounted() {
    this.getArticleData()
  }
}
</script>

<style lang="scss" scoped>
#articleUpload {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.typeBar {
  padding-left: 20px;
}
</style>
<style scoped="scoped" scope>
/deep/.el-textarea__inner,
/deep/.el-input__inner {
  background-color: #202020;
  text-align: center;
  color: #fff;
}

/deep/.el-input__inner {
  width: 300px;
}

/deep/.el-textarea__inner {
  min-height: 60px !important;
}

/deep/.el-upload {
  display: block;
}

/deep/.el-upload-dragger {
  background-color: #202020;
  margin: 0 auto;
}

.el-upload__tip {
  text-align: center;
}
</style>